<template>
    <div class="dashboard-container" v-loading="loading">
        <el-row class="list-menu">
            <el-button type="primary" @click="drawer = true">新增</el-button>
            <!-- <el-button type="warning" @click="modifyCamp">修改</el-button>
            <el-button type="danger" @click="removeCamp">删除</el-button> -->
        </el-row>

        <el-card>
            <el-table :data="data.list" border style="width: 100%">
                <el-table-column prop="sort" label="排序" width="0" align="center">
                </el-table-column>
                <el-table-column prop="title" label="标题">
                </el-table-column>
                <el-table-column prop="groupCode" label="分组编码" width="80" align="center">
                </el-table-column>
    
                <el-table-column prop="createTime" label="创建时间" width="180">
                    <template slot-scope="scope">{{ parseTime(scope.row.createTime) }}</template>
                </el-table-column>
                
                <el-table-column prop="houseKeep[0].avatarUrl" label="管家头像" width="80" align="center">
                    <template slot-scope="scope">
                        <img style="width: 50px;" :src="scope.row.houseKeppAvatarUrl" alt="">
                    </template>
                </el-table-column>
                <el-table-column prop="houseKepp" label="管家" width="180">
                </el-table-column>
                <el-table-column prop="houseKeppPhone" label="管家手机号" width="120"  align="center">
                </el-table-column>
                <el-table-column prop="remarks" label="备注"  align="center">
                </el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="80">
                    <template slot-scope="scope">{{ scope.row.status == 'true' ? '启用' : '禁用' }}</template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="140">
                    <template slot-scope="scope">
                        <el-button type="text" size="small"  @click="modifyCamp(scope.row)">编辑</el-button>
                        <el-button type="text" size="small" @click="removeCamp(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination :data="data" @currentChange="currentChange"></pagination>
        </el-card>

        
        <el-drawer class="w-drawer" :wrapperClosable="false" :title="`${drawerType == 1 ? '新增' : '修改'}营地分组`" :visible.sync="drawer" :direction="direction" @close="drawerClose">
            <div class="w-card">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="标题" prop="title">
                        <el-input v-model="form.title" placeholder="请填写标题"></el-input>
                    </el-form-item>
                    <el-form-item label="分组编码" prop="groupCode">
                        <el-input v-model="form.groupCode" placeholder="请填写分组编码"></el-input>
                    </el-form-item>
                    <el-form-item label="选择管家" prop="houseKepp">
                        <el-autocomplete
                            value-key="nickName"
                            v-model="form.houseKepp"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="请输入管家昵称搜索"
                            @select="handleSelect"
                        ></el-autocomplete>
                    </el-form-item>
                    <el-form-item label="状态" label-width="80px" prop="status">
                        <el-select v-model="form.status" placeholder="请选择状态">
                            <el-option label="启用" value="true"></el-option>
                            <el-option label="禁用" value="false"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="form.remarks"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input type="number" v-model="form.sort" placeholder="数字越大越靠前"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <el-button type="primary" class="drawer-bottom" @click="submit('form')">确认</el-button>
        </el-drawer>
    </div>
</template>

<script>
  import {parseTime} from '@/utils/index';
  import request from '@/utils/request';
export default {
    data() {
        this.parseTime = (d)=> parseTime(d)
        return {
            list: [],
            direction: 'rtl',
            drawer: false,
            form: {},
            rules: {
                groupCode:[{ required: true, message: '请输入分类编码', }],
                houseKepp:[{ required: true, message: '请选择管家', }],
                title:[{ required: true, message: '请输入标题', }],
                status: [{ required: true, message: '请选择状态', }],
            },
            drawerType: 1,
            data: {},
            loading: true,
        }
    },
    mounted() {
        this.getList();
    },
    methods: {
        currentChange(e) {
            this.getList(e);
        },
        handleSelect(e) {
            this.form.houseKeepOpenid = e.openid;
            this.form.houseKeppAvatarUrl = e.avatarUrl;
            this.form.houseKeppPhone= e.phone;
        },
        querySearchAsync(queryString, cb) {
            // console.log(queryString)
            // if (!queryString) {
            //     return;
            // }

            request.get('/housekeep-list', {
                params: {
                    name: queryString || '',
                },
            }).then((res)=> {
                // res.data.list.map((x)=> ({...x, value: x.nickName}))
                cb(res.data)
            })
            
        },
        drawerClose() {
            this.form = {};
            this.drawerType = 1;
            this.currentRow =false;
        },
        removeCamp(item) {
            this.form = item;
            this.$confirm(`此操作将永久删除【${this.form.title}】, 是否继续?`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.get('/camp-group/remove', {
                    params: {
                        id: this.form._id,
                    },
                }).then((res)=> {
                    this.getList();
                })
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
    
        },
        modifyCamp(item) {
            this.form = item;
            if (this.form && this.form._id) {
                this.drawerType = 2;
                this.drawer = true;
            } else {
                this.$message({
                    message: '请选择一条数据',
                    type: 'warning'
                });
            }
        },
        getList(num) {
            request.get('/camp-group', {
                params: {
                    pageNum: num || 1,
                },
            }).then((res)=> {
                this.data = res.data;
                this.loading = false;
            })
        },
        submit(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
            if (valid) {
                this.form.createTime = new Date().getTime();
                if (_this.drawerType == 1) {
                    request.get('/camp-group/add', {
                        params: this.form,
                    }).then((res)=> {
                        _this.drawer = false;
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    })
                } else {
                    request.get('/camp-group/update', {
                        params: this.form,
                    }).then((res)=> {
                        _this.drawer = false;
                        this.getList();
                        this.$message({
                            type: 'success',
                            message: '操作成功!'
                        });
                    })
                }
                
            }
            });
        },
    },
}
</script>

<style lang="scss" scoped>
.w-card{
    padding: 20px;
}
.dashboard {
    &-container {
        margin: 30px;
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}

.list-menu {
    margin-bottom: 40px;
}
.drawer-bottom{
    display:block;
    margin: auto;
    // position: absolute;
    // bottom: 20px;
    // left: 50%;
    // transform: translateX(-50%);
  }
</style>